<template>
  <div class="header-nav">
    <div class="header-left">
      <!-- 钉钉头像 -->
      <div class="avatar-container" @click="goToUserProfile">
        <el-avatar
          :size="40"
          :src="userStore.avatar"
          class="user-avatar"
        >
          <img src="/dingtalk.png" alt="钉钉头像" />
        </el-avatar>
        <div class="avatar-hover-effect"></div>
      </div>
      
      <!-- 用户信息 -->
      <div class="header-info">
        <div class="header-level">
          <el-icon class="level-icon">
            <Lightning />
          </el-icon>
          <span>{{ userStore.nickname }}</span>
        </div>
        <div class="header-stats">
          <span>{{ userStore.location }}</span>
        </div>
      </div>
    </div>
    
    <div class="header-right">
      <el-icon class="header-icon">
        <Clock />
      </el-icon>
      <el-icon class="header-icon">
        <Lock />
      </el-icon>
      <el-icon class="header-icon" @click="goToSearch" title="搜索">
        <svg t="1716799999999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1234" width="20" height="20"><path d="M832 832a32 32 0 0 1-22.624-9.376l-144.064-144.064A319.36 319.36 0 0 1 512 832C300.288 832 128 659.712 128 448S300.288 64 512 64s384 172.288 384 384c0 81.28-26.24 156.416-70.56 216.064l144.064 144.064A32 32 0 0 1 832 832zM512 128C335.36 128 192 271.36 192 448s143.36 320 320 320 320-143.36 320-320S688.64 128 512 128z" p-id="1235"></path></svg>
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { ElAvatar, ElIcon } from 'element-plus'
import { Lightning, Clock, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 点击头像跳转到个人主页
const goToUserProfile = () => {
  router.push('/user')
}

// 跳转到搜索页
const goToSearch = () => {
  console.log('点击搜索按钮，准备跳转到搜索页')
  router.push('/search')
}
</script>

<style scoped>
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 12px 16px 8px 8px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 8px #f0f1f2;
}

.header-left {
  display: flex;
  align-items: center;
}

.avatar-container {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.05);
}

.avatar-container:hover .avatar-hover-effect {
  opacity: 1;
}

.user-avatar {
  border: 2px solid #f0f0f0;
  transition: all 0.3s ease;
}

.avatar-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header-info {
  margin-left: 12px;
}

.header-level {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.level-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  color: #409eff;
}

.header-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-icon {
  width: 20px;
  height: 20px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
}

.header-icon:hover {
  color: #409eff;
}
</style> 